<template>

  <el-container>
    <!--  头 -->
    <el-header>
      <div>
        <img src="../assets/img/img.png" alt="">
        <span>公共运动场馆后台管理系统</span>
      </div>

      <el-button type="info" @click="exit">退出</el-button>
    </el-header>
    <el-container>
      <!--左-->
      <el-aside :width="isCollapse?'64px':'200px'">
        <!-- 管理菜单是否折叠 -->
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!-- 菜单栏  -->
        <el-menu background-color="#373d41" text-color="#fff" active-text-color="#ffd04b" :collapse="isCollapse"
                 :collapse-transition="false" :default-active="index===null? '/home/order':index" router>
          <el-menu-item index="/home/order" @click="saveState('/home/order')">
            <i class="el-icon-time"></i>
            <span slot="title">预约</span>
          </el-menu-item>
          <el-menu-item index="/home/user" @click="saveState('/home/user')">
            <i class="el-icon-s-custom"></i>
            <span slot="title">用户</span>
          </el-menu-item>
          <el-menu-item index="/home/space" @click="saveState('/home/space')">
            <i class="el-icon-location-outline"></i>
            <span slot="title">场地</span>
          </el-menu-item>
          <el-menu-item index="/home/equipment" @click="saveState('/home/equipment')">
            <i class="el-icon-goods"></i>
            <span slot="title">设备</span>
          </el-menu-item>
          <el-menu-item index="/home/match" @click="saveState('/home/match')">
            <i class="el-icon-date"></i>
            <span slot="title">赛事</span>
          </el-menu-item>
          <el-menu-item index="/home/finance" @click="saveState('/home/finance')">
            <i class="el-icon-star-off"></i>
            <span slot="title">财务</span>
          </el-menu-item>
          <el-menu-item index="/home/notice" @click="saveState('/home/notice')">
            <i class="el-icon-tickets"></i>
            <span slot="title">公告</span>
          </el-menu-item>
          <el-menu-item @click="saveState('/home/myMessage')"
                        index="9"
                        :route="{
            path: '/home/myMessage',
            query:{msg:this.msg}
            }"
          >
            <i class="el-icon-setting"></i>
            <span slot="title">   <el-badge :is-dot="s">新的信息 </el-badge></span>

          </el-menu-item>
        </el-menu>
      </el-aside>
      <!--  右  -->
      <el-main>
        <router-view @show="show" @send="send"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "Home",
  mounted() {
    this.initWebSocket();


  },

  data() {
    return {
      isCollapse: false,
      index: window.sessionStorage.getItem("index"),
      ws: null,
      s: false,
      beforeUnloadTime: null,
      msg: {},
    }
  },


  methods: {
    destroyed() {
      this.$http.get("/all/des")
    },

    show(show) {
      this.s = show;
    },
    exit() {

      this.$confirm('确认退出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
        sessionStorage.clear();
        this.destroyed();
        this.onClose();
        this.$router.push("/login");
      })
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    saveState(index) {
      sessionStorage.setItem("index", index)
    },

    initWebSocket() { // 初始化weosocket(必须)
      const account = sessionStorage.getItem("account");
      const wsUri = "ws://localhost:8081/admin/" + account; // 请根据实际项目需要进行修改
      this.ws = new WebSocket(wsUri); // 新建一个webstock对象
      this.ws.onmessage = this.onMessage;
      this.ws.onopen = this.onOpen;
      this.ws.onerror = this.onError;
      this.ws.onclose = this.onClose;
    },
    onOpen() { // websocket连接后发送数据(send发送)

    },
    onError(e) { // 连接建立失败重连
      this.onClose();
    },
    onMessage(re) { // 数据接收
      this.msg = JSON.parse(re.data);
      if (this.msg.code === 100) {
        this.s = true;
      } else if (this.msg.code === 200) {
        this.$message.success("提交成功");
      } else {
        this.$message.error(this.msg.msg);
      }

    },
    send(obj) { // 数据发送
      this.ws.send(JSON.stringify(obj.data));
    },
    onClose(e) { // 关闭
      this.ws.close();
    },


  }
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
}

.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: white;
  font-size: 20px;

  > div {
    display: flex;
    align-items: center;

    span {
      margin-left: 15px;
    }
  }
}

img {
  width: 50px;
  border: 1px solid #eee;
  border-radius: 50%;

}

.toggle-button {
  background-color: #4A5064;
  font-size: 10px;
  line-height: 24px;
  color: white;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.el-aside {
  background-color: #373d41;
}
</style>
